<template>
	<view class="member-tab">
		<!-- 子标签页切换 -->
		<view class="sub-tab-container">
			<scroll-view class="sub-tab-scroll" scroll-x="true" :scroll-left="scrollLeft">
				<view class="sub-tab-wrapper">
					<view v-for="tab in subTabs" :key="tab.key" class="sub-tab-item"
						:class="{ active: activeSubTab === tab.key }" @click="switchSubTab(tab.key)">
						<text class="sub-tab-text">{{ tab.title }}</text>
						<text class="sub-tab-count">{{ tab.count }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 成员列表内容 -->
		<view class="sub-content-container">
			<!-- 管理层成员 -->
			<view v-if="activeSubTab === 'management'" class="member-content">
				<MemberList :members="managementMembers" @memberClick="handleMemberClick"
					@moreActions="handleMemberMoreActions" />
				<view v-if="managementMembers.length === 0" class="empty-state">
					<text class="empty-text">暂无管理层成员</text>
				</view>
			</view>

			<!-- 普通成员 -->
			<view v-if="activeSubTab === 'normal'" class="member-content">
				<MemberList :members="normalMembers" @memberClick="handleMemberClick"
					@moreActions="handleMemberMoreActions" />
				<view v-if="normalMembers.length === 0" class="empty-state">
					<text class="empty-text">暂无普通成员</text>
				</view>
			</view>

			<!-- 黑名单成员 -->
			<view v-if="activeSubTab === 'blacklist'" class="member-content">
				<MemberList :members="blacklistMembers" @memberClick="handleMemberClick"
					@moreActions="handleMemberMoreActions" />
				<view v-if="blacklistMembers.length === 0" class="empty-state">
					<text class="empty-text">暂无黑名单成员</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, defineProps, defineEmits } from 'vue'
	import type { CircleMemberRelation } from '@/api/circle/circle'
	import MemberList from './MemberList.vue'

	// Props定义
	interface Props {
		members : CircleMemberRelation[]
	}

	const props = withDefaults(defineProps<Props>(), {
		members: () => []
	})

	// 事件定义
	const emit = defineEmits<{
		memberClick : [member: CircleMemberRelation]
		moreActions : [member: CircleMemberRelation]
	}>()

	const activeSubTab = ref<'management' | 'normal' | 'blacklist'>('management')
	const scrollLeft = ref(0)

	// 分类过滤成员
	// 管理层成员：正常状态且非黑名单的圈主和管理员
	const managementMembers = computed(() => {
		return props.members.filter(member =>
			member.memberStatus === 1 &&
			member.blacklistStatus === 0 &&
			(member.memberRole === 2 || member.memberRole === 3)
		)
	})

	// 普通成员：正常状态且非黑名单的普通成员
	const normalMembers = computed(() => {
		return props.members.filter(member =>
			member.memberStatus === 1 &&
			member.blacklistStatus === 0 &&
			member.memberRole === 1
		)
	})

	// 黑名单成员：黑名单状态为1的所有成员
	const blacklistMembers = computed(() => {
		return props.members.filter(member => member.blacklistStatus === 1)
	})

	// 子标签页配置
	const subTabs = computed(() => [
		{
			key: 'management',
			title: '管理层',
			count: managementMembers.value.length
		},
		{
			key: 'normal',
			title: '普通成员',
			count: normalMembers.value.length
		},
		{
			key: 'blacklist',
			title: '黑名单',
			count: blacklistMembers.value.length
		}
	])

	// 切换子标签页
	const switchSubTab = (tab : 'management' | 'normal' | 'blacklist') => {
		activeSubTab.value = tab
	}

	// 处理成员点击
	const handleMemberClick = (member : CircleMemberRelation) => {
		emit('memberClick', member)
	}

	// 处理成员更多操作
	const handleMemberMoreActions = (member : CircleMemberRelation) => {
		emit('moreActions', member)
	}
</script>

<style lang="scss" scoped>
	.member-tab {
		background: white;
	}

	.sub-tab-container {
		background: white;
		border-bottom: 1rpx solid #f0f0f0;

		.sub-tab-scroll {
			width: 100%;

			.sub-tab-wrapper {
				display: flex;
				width: 100%;

				.sub-tab-item {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 8rpx;
					padding: 20rpx 12rpx;
					font-size: 26rpx;
					color: #666;
					position: relative;
					cursor: pointer;
					transition: all 0.3s ease;
					white-space: nowrap;
					flex: 1;

					&.active {
						color: #007AFF;
						font-weight: 600;

						&::after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							width: 40rpx;
							height: 3rpx;
							background: #007AFF;
							border-radius: 2rpx;
						}
					}

					.sub-tab-text {
						font-size: 26rpx;
					}

					.sub-tab-count {
						font-size: 22rpx;
						background: #f0f0f0;
						color: #999;
						padding: 2rpx 8rpx;
						border-radius: 10rpx;
						min-width: 28rpx;
						text-align: center;
						line-height: 1.2;
					}

					&.active .sub-tab-count {
						background: #007AFF;
						color: white;
					}
				}
			}
		}
	}

	.sub-content-container {
		.member-content {
			min-height: 1000rpx;
		}

		.empty-state {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 300rpx;

			.empty-text {
				font-size: 26rpx;
				color: #999;
			}
		}
	}
</style>